<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/WEB-INF/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">
    <ui:define name="head">
        <h:outputStylesheet library="components" name="/leftTable/initialize.css"/>
    </ui:define>
    <ui:define name="content">
        <h:form id="user_form" prependId="false">
            <p:outputPanel styleClass="p-grid p-nogutter">
                <p:outputPanel id="resource_menu_panel" styleClass="p-col-12 p-md-2">
                    <p:dataTable value="#{viewScope.roles}" widgetVar="leftTable" var="element" selectionMode="single"
                                 selection="#{viewScope.select}" rowKey="#{element.id}"
                                 styleClass="left-table">
                        <f:facet name="header">
                            <div class="ui-input-icon-left" style="width:100%;margin-bottom: 1px;">
                                <i class="pi pi-search"/>
                                <p:inputText id="globalFilter"
                                             onkeydown="if(event.keyCode == 13) return false"
                                             onkeyup="if(event.keyCode == 13){PF('leftTable').filter()}"
                                             placeholder="#{msg['framework']['enterKeyword']}"/>
                            </div>
                        </f:facet>

                        <p:ajax event="rowSelect" listener="#{controller.onRowSelect}" update="user:dataTable"
                                global="false"/>
                        <p:ajax event="rowUnselect" listener="#{controller.onRowUnSelect}" update="user:dataTable"
                                global="false"/>

                        <p:column field="name" headerText=" #{msg['blog']['nickname']}" filterable="true"
                                  sortable="false">
                            <f:facet name="filter">
                                <p:inputText style="display: none"/>
                            </f:facet>
                        </p:column>
                    </p:dataTable>
                </p:outputPanel>
                <p:outputPanel styleClass="p-col-12 p-md-10">
                    <framework:dataTable id="user" formDialogId="user" lazy="true"
                                         headText="#{msg['blog']['userManagement']}"
                                         value="#{controller.dataModel}"
                                         singleSelection="#{viewScope.sinSelected}"
                                         multipleSelection="#{viewScope.mulSelected}">

                        <p:column headerText="#{msg['blog']['username']}" field="nickname"
                                  filterable="false">
                            <framework:avatar user="#{element}"/>
                        </p:column>
                        <p:column headerText="#{msg['blog']['nickname']}"
                                  field="nickname" filterable="false"/>
                        <p:column headerText="#{msg['blog']['userState']}"
                                  field="state" filterable="false">
                            <framework:tags value="#{element.state}"/>
                        </p:column>
                        <p:column headerText="#{msg['blog']['userRole']}"
                                  field="roleId" filterable="false">
                            <p:repeat value="#{viewScope.roles}" var="role">
                                <p:tag value="#{role.name}" rendered="#{fn:contains(element.roleIds,role.id)}"
                                       styleClass="p-mr-1"
                                       severity="success"/>
                            </p:repeat>
                        </p:column>

                        <p:column headerText="#{msg['framework']['operatedTime']}" sortBy="operatedTime"
                                  sortable="true" width="150"
                                  sortOrder="desc" sortPriority="1">
                            <h:outputText value="#{element.operatedTime}">
                                <f:convertDateTime type="localDateTime"
                                                   pattern="#{msg['format']['localDateTime']}"/>
                            </h:outputText>
                        </p:column>
                        <p:column headerText="#{msg['blog']['remark']}" field="remark" filterable="false"
                                  sortable="false"/>
                    </framework:dataTable>
                </p:outputPanel>
            </p:outputPanel>
        </h:form>
    </ui:define>

    <ui:define name="dialog">
        <h:form id="password_dialogform">
            <framework:dialog id="user" value="#{viewScope.vo}"
                              saveMethod="#{controller.updatePwd}"
                              saveUpdate="@widgetVar(user_dataTable)">

            </framework:dialog>
        </h:form>
        <h:form id="dialogform">
            <framework:dialog id="user" value="#{viewScope.vo}"
                              saveUpdate="@widgetVar(user_dataTable)">

                <framework:label target="username" value="#{msg['blog']['username']}" styleClass="p-col-6">
                    <p:inputText id="username" value="#{viewScope.vo.username}" required="true"/>
                </framework:label>

                <framework:label target="username" value="#{msg['blog']['nickname']}" styleClass="p-col-6">
                    <p:inputText id="name" value="#{viewScope.vo.nickname}" required="true"/>
                </framework:label>

                <framework:label target="password1" value="#{msg['framework']['inputPassword']}"
                                 styleClass="p-col-12 p-md-6" rendered="#{viewScope.vo.id eq null}">
                    <p:password id="password1" match="@widgetVar(password2)"
                                autocomplete="new-password" required="true"
                                validatorMessage="#{msg['validation']['passwordFormat']}"
                                label="#{msg['framework']['inputPassword']}"
                                value="#{viewScope.vo.password}">
                        <f:validateRegex
                                pattern="^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z._~!@#$^\&amp;*]+$)(?![a-z0-9]+$)(?![a-z._~!@#$^\&amp;*]+$)(?![0-9._~!@#$^\&amp;*]+$)[a-zA-Z0-9._~!@#$^\&amp;*]{8,20}$"/>
                    </p:password>
                </framework:label>


                <framework:label target="password2" value="#{msg['framework']['confirmPassword']}"
                                 styleClass="p-col-12 p-md-6" rendered="#{viewScope.vo.id eq null}">
                    <p:password id="password2" widgetVar="password2" autocomplete="new-password"
                                required="true" value="#{viewScope.vo.password}"/>
                </framework:label>


                <framework:label target="role" value="#{msg['blog']['userRole']}" styleClass="p-col-12">
                    <p:selectCheckboxMenu id="role" value="#{viewScope.vo.roleIds}"
                                          label="#{msg['framework']['pleaseChoose']}"
                                          multiple="true" filter="true" filterMatchMode="startsWith"
                                          panelStyle="width: 30rem" scrollHeight="250">
                        <f:selectItems value="#{viewScope.roles}" var="role" itemLabel="#{role.name}"
                                       itemValue="#{role.id}"/>
                    </p:selectCheckboxMenu>
                </framework:label>

                <framework:label target="remark" value="#{msg['blog']['remark']}">
                    <p:inputTextarea id="remark" value="#{viewScope.vo.remark}" autoResize="false"/>
                </framework:label>

            </framework:dialog>
        </h:form>
    </ui:define>
</ui:composition>